<template>
    <div class="model">
        <div class="mask"></div>
        <div class="content">
            <h3>{{ title }}</h3>
            <div>
                <slot name="body"></slot>
            </div>
            <div v-show="btntype==1"> 
                <button @click="submit">确定</button>
                <button @click="cancel">取消</button>
            </div>
            <div v-show="btntype==2"> 
                <button @click="gomine">前往个人中心</button>
                <button @click="gohome">前往首页</button>
            </div>
        </div>

    </div>
</template>

<script setup>
import {defineProps,defineEmits} from "vue"
let props=defineProps({
    title:{
        type:String,
        required:true
    },
    btntype:{
        type:Number,
        required:true
    }
})
console.log(props);
const emits=defineEmits(["submit","cancel","gohome","gomine"])
const gomine=()=>{
    emits("gomine")
}
const gohome=()=>{
    emits("gohome")
}
</script>

<style lang="scss" scoped>
.model {
    width: 100%;
    height: 100%;
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;

    .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .2);

    }

    .content {
        width: 3.01rem;
        height: 1.56rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: green;
    }
}
</style>
